<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/6/18
  Time: 10:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>时间统计客户</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/echarts.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
</head>
<body>
<form class="layui-form" style="margin-top:30px;">
    <div class="layui-item" style="padding-left: 250px;padding-top:30px;height: 40px">
        <div class="layui-inline">
            <label class="layui-form-label">统计对象</label>
            <div class="layui-input-inline" style="width:100px;">
                <select name="selectType" lay-filter="report-object">
                    <option value="1010" selected="">新增客户</option>
                    <option value="1020">新增跟进记录</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">统计粒度</label>
            <div class="layui-input-inline" style="width:100px;">
                <select name="action" lay-filter="select-action">
                    <option value="year">年</option>
                    <option value="month" selected="">月</option>
                    <option value="day">日</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">时间</label>
            <div class="layui-input-inline" style="width:100px;">
                <select name="year" id="date-year" class="layui-input">
                    <option value="2010">2010</option><option value="2011">2011</option>
                    <option value="2012">2012</option><option value="2013">2013</option>
                    <option value="2014">2014</option><option value="2015">2015</option>
                    <option value="2016">2016</option><option value="2017">2017</option>
                    <option value="2018">2018</option><option value="2019">2019</option>
                    <option value="2020" selected="">2020</option>
                    <option value="2021">2021</option><option value="2022">2022</option>
                    <option value="2023">2023</option><option value="2024">2024</option>
                    <option value="2025">2025</option><option value="2026">2026</option>
                    <option value="2027">2027</option><option value="2028">2028</option>
                    <option value="2029">2029</option><option value="2030">2030</option>
                </select>
            </div>
            <div id="date-month-div" class="layui-input-inline layui-hide" style="width:100px;">
                <select name="month" id="date-month">
                    <option value="01" selected="">1月</option><option value="02">2月</option>
                    <option value="03">3月</option><option value="04">4月</option>
                    <option value="05">5月</option><option value="06">6月</option>
                    <option value="07">7月</option><option value="08">8月</option>
                    <option value="09">9月</option><option value="10">10月</option>
                    <option value="11">11月</option><option value="12">12月</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <button id="enter" class="layui-btn layui-btn-primary" type="button">确定</button>
            </div>
        </div>
    </div>
</form>
<div id="myecharts" style="width: 1300px;height:400px;"></div>

<script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['layer','form'], function() {
        var $ = layui.$;
        var form = layui.form;

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('myecharts'));

        // 指定图表的配置项和数据
        var  option = {
            title : {
                text: '客户新增趋势'
            },
            tooltip:{  //鼠标经过显示提示框
                show : true,
                trigger: "axis"
            },
            legend:{  //不同的线的类型
                data: ["客户新增量"]
            },
            xAxis: {
                name: "时间",
                type: 'category'
            },
            yAxis: {
                name: "新增客户量",
                type: 'value'
            },
            toolbox:{  //工具栏
                show: true,
                feature:{
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},  //图形切换
                    restore: {},
                    saveAsImage: {}
                }
            },
            dataZoom: [  //滚动条
                {
                    type: 'slider',
                    show: true,
                    start: 0,
                    end: 100
                }
            ],
            series: [
                {
                    name: "客户新增量",
                    data: [],
                    type: 'line'
                }
            ]
        };
        function init(){
            var year = new Date().getFullYear();

            var str = '';
            for(var i=year-10;i<=year+10;i++){
                if(i == year){
                    str += '<option value="' + i + '" selected>' + i + '</option>';
                }else{
                    str += '<option value="' + i + '">' + i + '</option>';
                }
            }
            $('#date-year').html(str);
            form.render("select");

        }


        form.render("select");
        init();

        //监听查询方式选择
        form.on('select(select-action)',function(data){
            if(data.value == 'day'){
                $('#date-month-div').removeClass('layui-hide');
            }else{
                $('#date-month-div').addClass('layui-hide');
            }
        });

        //监听查询对象选择
        form.on('select(report-object)',function(data){
            if(data.value == '1010'){
                option.title = {text: '客户新增趋势'};
                option.legend = {data: ["客户新增量"]};
                option.yAxis= {name: "新增客户量",type: 'value'};
                option.series = [{name: "客户新增量",data: [],type: 'line'}];
            }else{
                option.title = {text: '跟进记录新增趋势'};
                option.legend = {data: ["跟进记录新增量"]};
                option.yAxis= {name: "新增跟进记录量",type: 'value'};
                option.series = [{name: "跟进记录新增量",data: [],type: 'line'}];
            }
        });

        //构建公司近n天的新增/损失客户量
        BuildCustomerBase();

        $("#enter").click(function(){
            BuildCustomerBase();
        });

        /**
         构建新增客户图表统计
         **/
        function BuildCustomerBase(){
            //构建图表data数
            var dataArray = [];
            console.log('start');

            var dateStr = '';
            var action = $('select[name=action]').val();
            if(action == 'year'){
                dateStr = $('#date-year').val();
            }else if(action == 'month'){
                dateStr = $('#date-year').val() ;
            }else{
                var myDate = new Date($('#date-year').val(),$('#date-month').val(),0);
                var days = myDate.getDate();
                dateStr = $('#date-year').val() + '-' + $("#date-month").val();
            }
            $.ajax({
                url:"${pageContext.request.contextPath}/statistics/StatisticsCustomers",
                type:"post",
                data:{
                    "action": $('select[name=action]').val(),
                    "selectType":$('select[name=selectType]').val(),
                    "date":dateStr,
                    "days":days
                },
                asnyc:false,
                dataType:"json",
                beforeSend:function(){
                    loading = layer.load();
                },
                success:function(res){

                    if(res.code != 0){
                        layer.closeAll('loading');
                        layer.msg(res.msg);
                        return;
                    }

                    console.log(res.data)

                    var res_data = res.data;
                    console.log(res_data)
                    //构建json对象
                    var data = {};

                    if(action == 'year'){
                        var myDate = new Date(dateStr);
                        console.log(myDate);
                        var y = myDate.getFullYear();
                        data[y] = 0;
                    }else if(action == 'month'){
                        dateStr = dateStr + '-' + $("#date-month").val();
                        var myDate = new Date(dateStr);
                        console.log(myDate);
                        var y = myDate.getFullYear();

                        for(var i=1;i<=12;i++){
                            var datename = '' + y;
                            datename += i>=10? '-' + i : '-0' + i;
                            console.log(datename);
                            data[datename] = 0;
                        }

                    }else if(action == 'day'){
                        var myDate = new Date($('#date-year').val(),$('#date-month').val(),0);
                        var days = myDate.getDate();
                        var datename = '';
                        for(var i=1;i<=days;i++){
                            datename = $('#date-year').val()+'-'+$('#date-month').val();
                            datename += i>=10 ? '-' + i : '-0' + i;
                            data[datename] = 0;
                        }
                    }else{
                        return;
                    }


                    var dataJson = {};  //构建json对象，日期为key 统计数值为value
                    for(var i=0; i < res_data.time.length;i++ ){
                        dataJson[res_data.time[i]] = res_data.nums[i];
                    }

                    console.log(dataJson)
                    //构建图表data数组
                    for(var key in data){
                        if(dataJson[key] != null){
                            dataArray.push([key, dataJson[key]]);
                        }else{
                            dataArray.push([key, data[key]]);
                        }
                    }
                    console.log(dataArray)
                },
                error:function(){
                    layer.msg("服务器开小差了!");
                }
                ,
                complete:function(){
                    layer.close(loading);
                    console.log(option);
                    option.series[0].data = dataArray;
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            });
        }
    });
</script>
</body>
</html>